
.jmv-notifications {
    display: flex ;
    flex-direction: column ;
    justify-content: flex-end ;
    pointer-events: none ;
}

.jmv-notification {
    margin: 6px ;
    padding: 0 12px 0 0 ;
    background-color : #F0F0F0 ;
    border: 1px solid #ACACAC;
    border-radius: 2px;
    transition: all .5s ;
    height: 85px ;
    overflow: hidden ;
    box-sizing: border-box ;
    pointer-events: auto ;
    display: flex ;
    flex-direction: row;
}

.jmv-notification.hidden:not(:hover) {
    height: 0 ;
    opacity: 0 ;
    margin-top: 0 ;
    margin-bottom: 0 ;
}

.jmv-notification-icon {
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 50px;
    padding: 5px;
    flex: 1;
    box-sizing: border-box ;
    line-height: 50px;
    text-align: center;
    height: 85px ;
    min-width: 85px;
}

[data-type='info'] .jmv-notification-icon {
    mask: url('../assets/action-info.svg') 0 0/50px 50px no-repeat;
    background-color: #81B2F5;
    -webkit-mask-image: url('../assets/action-info.svg');
}

[data-type='error'] .jmv-notification-icon {
    mask: url('../assets/action-error.svg') 0 0/50px 50px no-repeat;
    background-color: #ce3d3d;
    -webkit-mask-image: url('../assets/action-error.svg');
}

[data-type='warning'] .jmv-notification-icon {
    mask: url('../assets/action-warning.svg') 0 0/50px 50px no-repeat;
    background-color: #FFA500;
    -webkit-mask-image: url('../assets/action-warning.svg');
}

[data-type='success'] .jmv-notification-icon {
    mask: url('../assets/action-check.svg') 0 0/50px 50px no-repeat;
    background-color: #399b3f;
    -webkit-mask-image: url('../assets/action-check.svg');
}

.jmv-notification-info {
    flex: 4;
}

.jmv-notification-title {
    margin-top: 12px ;
    font-size: 120% ;
}

.jmv-notification-body {
    display: flex ;
    justify-content: space-between ;
    margin-bottom: 12px ;
    white-space: pre-wrap;
}

.jmv-notification-content {
}

.jmv-notification-content > * {
    margin: .6em 0 0 ;
}

.jmv-notification-progressbar {
    height: 24px ;
    width: 280px ;
}

.jmv-notification-progressbarbar {
    width: 0 ; /* overridden by style="" */
    height: 100% ;
    background-color: #6B9DE8 ;
    transition: width .1s ;
}

.jmv-notification-buttons > * {
    display: inline-block ;
    padding: 6px ;
    border: 1px solid transparent ;
    width: 30px ;
    text-align: center ;
}

.jmv-notification-buttons > :hover {
    background-color: white ;
    border: 1px solid #ACACAC ;
}
